<template>
  <div class="photoInfo">
    <!-- 标题 -->
    <h1>{{photoInfo.content}}---{{$route.params.id}}</h1>
    <!-- 子标题 -->
    <p>
      <span>发表时间：{{photoInfo.time}}</span>
      <span>点击{{photoInfo.click}}次</span>
    </p>
    <hr />
    <div class="info">
      <div class="thumbs">
        <img v-for="item in photoInfo.link" :key="item.src" :src="item.src" preview="1" alt />
      </div>
      <h3>{{photoInfo.content}}</h3>
    </div>
    <!-- 评论子组件 -->
    <comment></comment>
  </div>
</template>
<style lang="less" scoped>
.photoInfo {
  padding: 0 5px;
  h1 {
    font-size: 16px;
    color: red;
    text-align: center;
    margin: 10px 0;
  }
  p {
    font-size: 12px;
    color: #226aff;
    display: flex;
    justify-content: space-between;
  }
  .info {
    .thumbs {
      display: flex;
      flex-wrap: wrap;
      img {
        width: 33.33%;
        padding: 5px;
      }
    }
    h3 {
      font-size: 16px;
      text-align: center;
    }
  }
}
</style>
<script>
import comment from "../subcomponents/comment.vue";
export default {
  data() {
    return {
      photoInfo: ""
    };
  },
  created() {
    this.getphotoInfo();
  },
  mounted() {
    this.$previewRefresh();
  },
  methods: {
    getphotoInfo() {
      this.$http.get("photoInfo/" + this.$route.params.id).then(res => {
        console.log(res.body);
        this.photoInfo = res.body;
      });
    }
  },
  components: {
    comment
  }
};
</script>